/* eslint-disable no-useless-concat */
import React,{useEffect, useState} from 'react';
import '../../styles/News/Userinfo.scss'
import RentOut from './RentOut'
import Tenement from './tenement'
const Userinfo = (props) => {
  const [navActive, setnavActive] = useState('1')
  const backgo=()=>{
    document.querySelector('footer').style.display='flex'
     props.history.goBack();
   
  }
  useEffect(()=>{
  },[navActive])
  const changeActive = (e)=>{
    
    setnavActive(
     e.target.dataset.key
    ) 
    
  }  
  return (
    <div className='Userinfo'>
      <div className="Userinfo-header">
        <h2>个人信息</h2>   
        <span className='iconfont' onClick={backgo}>&#xe601;</span>   
      </div>
      <div className="userinfo-content">
        <div className="userinfo-nav" onClick={changeActive}>
          <div data-key='1' className={'rentOut'+' '+(navActive === '1'?'navActive':'')}>你的出租</div>
          <div data-key='2' className={'tenement'+' '+(navActive === '2'?'navActive':'')}>你的求租</div>
        </div>
        <div className="contentBox">
          <div className="rentOut-content" style={{display: (navActive ==='1'?'block':'none')}}>
              <RentOut to={props}></RentOut>
          </div>
          <div className="tenement-content" style={{display: (navActive ==='2'?'block':'none')}}>
              <Tenement to={props}></Tenement>
          </div>
        </div>     
      </div> 
    </div>
  );
}




export default Userinfo;
